<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="150px"
    >
      <el-form-item label="名称:" >
        {{dataForm.title}}
      </el-form-item>
      <el-form-item label="上架状态:" prop="state">
        <div v-if="dataForm.state == 0">上架</div>
        <div v-if="dataForm.state == 1">下架</div>
      </el-form-item>
      <el-form-item label="封面:">
        <img width="100%" :src="'http://a-123.natapp1.cc/x/' + dataForm.headPhoto" alt="">
      </el-form-item>
      <el-form-item label="身份证正面:">
        <img width="100%" :src="dataForm.identity_z" alt="">
      </el-form-item>
      <el-form-item label="身份证反面:">
        <img width="100%" :src="dataForm.identity_f" alt="">
      </el-form-item>
      <el-form-item label="营业执照:">
        <img width="100%" :src="dataForm.business_license" alt="">
      </el-form-item>
      <el-form-item label="卫生许可证:">
        <img width="100%" :src="dataForm.hygienic_license" alt="">
      </el-form-item>
      <el-form-item label="消防证:">
        <img width="100%" :src="dataForm.fire_permit" alt="">
      </el-form-item>
      <el-form-item label="门头照片:">
        <img width="100%" :src="dataForm.head_photo" alt="">
      </el-form-item>
      <el-form-item label="审核状态:" prop="status">
        <div v-if="dataForm.status == 0">待审核</div>
        <div v-if="dataForm.status == 1">已通过</div>
        <div v-if="dataForm.status == 3">未通过</div>
      </el-form-item>
      <el-form-item label="抽佣比例:" prop="proportion">
        {{dataForm.proportion}}
      </el-form-item>
      <el-form-item label="商户余额:">
        {{ dataForm.wallet }}
      </el-form-item>
      <el-form-item label="是否推荐:" prop="ifTj">
        <div v-if="dataForm.ifTj == 0">是</div>
        <div v-if="dataForm.ifTj == 1">否</div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      visible: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      dataForm: {
        id: "",
        title: "",
        zj: "",
        dj: "",
        images: "",
        sl: "",
        headPhoto: "",
        status: "",
      },
      ifTjList: [
        {
          value: "0",
          label: "是",
        },
        {
          value: "1",
          label: "否",
        },
      ],
      options: [
        {
          value: "0",
          label: "上架",
        },
        {
          value: "1",
          label: "下架",
        },
      ],
      statusList: [
        {
          value: "0",
          label: "待审核",
        },
        {
          value: "1",
          label: "已通过",
        },
        {
          value: "1",
          label: "未通过",
        },
      ],
      // dataRule: {
      //   state: [{ required: true, message: "上架状态不能为空", trigger: "blur" }],
      //   status: [{ required: true, message: "审核状态不能为空", trigger: "blur" }],
      //   proportion: [{ required: true, message: "抽佣比例不能为空", trigger: "blur" }],
      //   ifTj: [{ required: true, message: "是否推荐不能为空", trigger: "blur" }],
      // },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 5;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPG && isLt2M;
      },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    init(id) {
      this.dataForm.id = id || "";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `sys/merchant/info?id=${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm= data.merchant;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`sys/merchant/update`),
              method: "post",
              params: this.$http.adornParams({
                id: this.dataForm.id,
                title: this.dataForm.title,
                zj: this.dataForm.zj,
                dj: this.dataForm.dj,
                images: this.dataForm.images,
                sl: this.dataForm.sl,
                headPhoto: this.dataForm.headPhoto,
                status: this.dataForm.status
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          } else {
            this.$http({
              url: this.$http.adornUrl(`sys/creativegoods/save`),
              method: "post",
              params: this.$http.adornParams({
                title: this.dataForm.title,
                zj: this.dataForm.zj,
                dj: this.dataForm.dj,
                images: this.dataForm.images,
                sl: this.dataForm.sl,
                headPhoto: this.dataForm.headPhoto,
                status: this.dataForm.status,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>